<template>
  <div>
    <div class="row justify-start line-height-32px bg-panda-dark-dark items-center q-pl-sm">
      <span class="panda-right-info-toogle-button active"   @click="toggle_showrightdetail">
          <q-tooltip >  {{rightdetail_tooltip}}</q-tooltip>
        <span class="panda-right-info-toogle-button-inner"></span>
         </span>
    </div>

    <q-scroll-area class :style="compute_scroll_area_style()">
      <div class="bg-panda-base-light q-px-md q-pt-sm q-pb-md">
        <div class="row q-mb-lg">
          <div class="col">
            <span class="line-height-32px">{{ compute_table_item_show_name(right_detail_obj,'', 'leagueName') || '-' }}</span>
          </div>
          <div class="col">
            <div class="float-right">
              <span class="line-height-32px">{{ format_month(right_detail_obj.beginTime)}}</span>
            </div>
          </div>
        </div>
        <div class="row justify-between">
          <div class="col-4 text-center">
            <img
        
              :src="compute_image_src(right_detail_obj.picUrl) "
              class="border-radius-10px"
              alt
              width="50px"
              height="50px"
            />
            <!-- <div>{{right_detail_obj.homeTeamNames?right_detail_obj.homeTeamNames.zs:''  }}</div> -->
            <div v-html=" break_words_to_mulit_line_by_value(compute_table_item_show_name(right_detail_obj,'','homeTeamNames'), 10)"></div>
          </div>
          <div class="col-4 text-center" style="line-height: 55px;">{{join_the_mathStaus(right_detail_obj.matchPeriodId, right_detail_obj)}}</div>
          <div class="text-center col-4">
            <img
              :src="compute_image_src(right_detail_obj.picUrl) "
              class="border-radius-10px"
              alt
              width="50px"
              height="50px"
            />
            <!-- <div>{{right_detail_obj.awayTeamNames?right_detail_obj.awayTeamNames.zs:''}}</div> -->
             <div  v-html=" break_words_to_mulit_line_by_value(compute_table_item_show_name(right_detail_obj,'','awayTeamNames'), 10)"></div>
          </div>
        </div>

        <div
          class="text-left q-mt-md"
        >{{right_detail_obj.dataSourceCode}}  <span v-if="right_detail_obj.operatorLiable"> /{{ right_detail_obj.operatorLiable}}</span> </div>
      </div>

      <!-- 中间 tab -->
      <div class="row border-top border-panda-dark-dark">
        <div
          v-for="(items,indexs) in  tab_options"
          :key="`select_tab_${indexs}`"
          @click="select_tab_click(items,indexs)"
          :class="select_tab_name==items.name?'panda-tab-like-tab-active ':'bg-panda-base-light'"
          class="col-1 text-panda-text-dark text-center cursor-pointer line-height-30px border-right border-panda-dark-dark box-sizing panda-tab-like-tab"
          style="width:115px;height: 30px;"
        >
          <!-- <q-icon :name="items.icon"></q-icon> -->
        
      
          <span
            style="margin-left:4px; "
            class="panda-tab-like-tab-label"
            :class="select_tab_name==items.name?'text-panda-text-light ':'text-panda-text-dark'"
          >{{items.label}}</span>
        </div>
      </div>
      <!-- 下层展示 -->
      <!-- 对阵信息 -->
      <div v-if="select_tab_name==1">
        <right-info-team :right_detail_obj="right_detail_obj"></right-info-team>
      </div>
        <div v-if="select_tab_name!=1">
         <p class="text-center"> 该功能暂未开发</p>
      </div>
    </q-scroll-area>
  </div>
</template>
<style lang="stylus" scoped>


</style>
<script>
import { match_resource_tabledata } from "src/mock/match/index.js";
import constantmixin from "src/mixins/constant/index.js";
import rightInfoTeam from "src/pages/match/manage/component/rightInfoTeam.vue";
// import queryConstant_fn from 'src/mixins/constant/module/queryConstant_fn.js'
import matchmixin from "src/mixins/pages/match/match.js"
import breakwordsmixin from "src/mixins/style/breakwords.js";
import formartmixin from 'src/mixins/module/formartmixin.js'
import matchManage from "src/mixins/pages/match/matchManage.js"
import rightinfomixin from "src/mixins/layout/rightinfo.js";
import routerCache from "src/mixins/routerCache/routerCache.js";
export default {
  mixins: [...constantmixin,matchmixin,formartmixin,breakwordsmixin, matchManage,routerCache,rightinfomixin],
  components: {
    rightInfoTeam
  },
  data() {
    return {
      tab_options: [
        { label: "对阵信息", name: "1" },
        { label: "赛事详情", name: "2" },
        { label: "注单分布", name: "3" }
      ],
      select_tab_name: "1"
    };
  },
  props: {
    right_detail_obj: "",
    tablecolumns:""
  },
  methods: {
    show_match_edit() {
      this.$emit("toedit");
    },
    select_tab_click(item, index) {
      this.select_tab_name = item.name;
    },

    compute_scroll_area_style() {
      let wh = this.window_size_info.height;
      let wc = wh - 36 - 30 - 32 - 200;
      return `height:${wc}px; max-height:${wc}px;`;
    }
  }
};
</script>
